<template>
  <div>
    <el-checkbox-group v-model="answer" @input="changeAnswer">
      <el-checkbox 
                    v-for="(content, index) in data"
                    :key="index"
                    :label="index"
                    :disabled="configuration.has_capacity && configuration.capacity[index] === 0">
        {{content}}
        <span class="remaining-count" v-if="configuration.has_capacity">
          剩余: {{configuration.capacity[index]}}
        </span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    data: {},
    configuration: {}
  },
  data () {
    return {
      answer : []
    }
  },
  methods: {
    changeAnswer(){
      this.answer.sort()
      this.$emit('answerChange',this.answer)
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="sass">
.remaining-count
  margin-left: 1cm
  font-weight: normal
</style>
